<template>
  <div class="newsInfo-container">
       <!-- <h1>新闻详情组件---{{ id }}</h1> -->
     <p class="title">{{ newsInfo.title }}</p>
     <p class="display">
         <span>发表时间：{{ newsInfo.add_time | dateFormat}}</span><span>点击{{ newsInfo.click }}次</span>
     </p>
     <hr>
     <div v-html="newsInfo.content"></div>

     <!-- 发表评论 -->
    <comment :id=id></comment>
  </div>
</template>


<script>
import comment from '../subcomponents/comment.vue'
export default {
    data(){
        return {
          newsInfo:{}
        }
    },
    props:['id'],
    created(){
       this.getNewsInfo()
    },
    methods:{
        async getNewsInfo(){
            // console.log('ok')
           const{ data }=await this.$http.get('/api/getnew/'+this.id)
           if(data.status===0){
            //    console.log(data.message)
            this.newsInfo=data.message[0]
           }
        }
    },
    components:{
        comment
    }
};
</script>


<style lang="scss" scoped>
    .newsInfo-container{
        padding:3px;
    }
  .title{
      font-size:14px;
      color:red;
      text-align: center;
      font-weight:700;
      padding:15px;
      margin: 0;
  }
  .display{
      color:#26a2ff;
      display:flex;
      justify-content: space-between;
  }
</style>
